<template>
	<view class="page">
		<view class="order">
			<view class="top_info">
				<!-- 适配状态栏 -->
				<view class="status_bar"></view>
				<view class="flex top_title flex_col_center">
					<view>
						<!-- #ifndef MP-WEIXIN-->
						<text class="custom-icon custom-icon-jiantou2" @click="leftClick"></text>
						<text class="name">识别录单</text>
						<!-- #endif -->
					</view>
					<view class="flex-middle" @click="gopage">
						<text class="account">识别</text>
						<image src="../../static/image/yes.png" mode="widthFix"></image>
					</view>
				</view>

			</view>

			<view class="all_order">
				<view class="input-txt">
					<u-input :height="height" v-model="txt" v-model.trim="txt" :type="type" :border="true"
						:auto-height="autoHeight" />
					<view class="rules-txt">
						识别规则：商品名称 + 下单数量 + 商品规格名称 ( "+" 号仅作为示意，实际不用输入)，多个商品用，(逗号) 隔开 或 ; (分号) 或（空格）隔开例如：牛肉3斤，羊肉5斤 或
						猪肉3斤；狗肉5斤 或 鸡肉3斤 鸭肉5斤
					</view>
					<view class="speech_box">
						<view class="head flex-btw">
							<image src="../../static/image/voice_on.png" mode=""></image>
						</view>
						<view class="wave flex-center">
							<view :class="[{on:startSpeech},'voice_btn flex-center']" @longpress="longtapAction"
								@touchend="tapendAction">
								<view v-if="!startSpeech" class="down">按住说话</view>
								<view style="flex: 1;" v-if="startSpeech">
									<image class="img" src="../../static/image/voice_off.png"></image>
								</view>
								<view class="film"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// #ifdef H5
	const wx = require('jweixin-module');
	// #endif
	// #ifdef MP-WEIXIN
	let plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	// #endif
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				txt: "",
				type: 'textarea',
				haveConfig: false, //是否配置了微信（只需一次）
				startSpeech: false, //开始录入
				height: 200,
				autoHeight: true,

			};
		},
		onReady() {
			getApp().setTitle()
		},
		onLoad() {
			this.getWxConfig();
		},
		methods: {
			//返回上个页面
			leftClick() {
				// #ifdef H5
				uni.hideKeyboard();
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack({
					delta: 1
				});
				// #endif	
			},
			//获取微信配置
			getWxConfig() {
				$https('GETN', 'wxConfig', {}, res => {
					if (res.data.errcode == 0) {
						console.log(res)
						this.haveConfig = true;
						wx.config({
							debug: false, // 开启调试模式
							appId: res.data.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.data.signature, // 必填，签名，见附录1
							jsApiList: ['startRecord', 'stopRecord', 'uploadVoice',
								'translateVoice'
							] // 必填，需要使用的JS接口列表
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取微信配置失败,请重试'
						})
					}
				}, true)
			},
			//开始录音
			longtapAction() {
				this.startSpeech = true;
				// #ifndef MP-WEIXIN
				wx.startRecord();
				// #endif
				// #ifdef MP-WEIXIN
				manager.start();
				// #endif
			},
			//停止录音
			tapendAction() {
				this.startSpeech = false;
				// #ifndef MP-WEIXIN
				wx.stopRecord({
					success: (res) => {
						wx.translateVoice({
							localId: res.localId, // 需要识别的音频的本地Id，由录音相关接口获得
							isShowProgressTips: 1, // 默认为1，显示进度提示
							success: (result) => {
								// alert(result.translateResult); // 语音识别的结果
								// this.voiceResult = result.translateResult;
								this.txt = result.translateResult.replace(/。/g, '');
							}
						})
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				manager.stop();
				var _this = this;
				manager.onStop = function(res) {
					console.log(res)
					_this.txt = res.result.replace(/。/g, '');
				}
				// #endif
			},
			gopage() {
				if (this.txt == "") {
					uni.showToast({
						icon: 'none',
						title: '内容不能为空'
					})
				} else {
					uni.navigateTo({
						url: `/pages/catalogue/catalogue_result?txt=${this.txt}`
					})
				}

			}
		},

	};
</script>

<style lang="scss" scoped>
	.order .top_info .top_title {
		justify-content: space-between;
		padding: 24rpx 34rpx 10rpx;
		color: black;
		font-weight: bold;

		.name {
			font-size: 36rpx;
			padding-left: 20rpx;
		}
	}

	.top_title {

		.account {
			margin-left: 10rpx;
			color: #4FA388;
			font-size: 28rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}
	}

	.order {
		.top_info {
			width: 100%;
			z-index: 99;
			position: fixed;
			background: #F6F6F7;
			// #ifdef APP-PLUS
			top: var(--status-bar-height);
			// #endif
		}

		.all_order {
			padding-top: 120rpx;
			// #ifdef APP-PLUS
			padding-top: calc(120rpx + var(--status-bar-height));
			// #endif
		}

		.input-txt {
			padding: 0rpx 30rpx;
			height: auto;
		}

		.rules-txt {
			color: #666666;
			margin-top: 40rpx;
		}


	}

	.speech_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150rpx;

		.head {
			color: #4FA388;
			font-size: 28rpx;
			padding: 32rpx 44rpx;
		}

		image {
			width: 34rpx;
			height: 46rpx;
		}

		.wave {
			flex: 1;

			.voice_btn {
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				border: 1px solid #4FA388;
				background: #fff;
				box-shadow: 0rpx 0rpx 30rpx #4FA388;

				&.on {
					background: #4FA388;
					box-shadow: 0rpx 0rpx 30rpx #999;
				}

				.down {
					width: 70rpx;
					text-align: center;
					color: #4FA388;
					font-size: 32rpx;
				}

				.img {
					width: 60rpx;
					height: 80rpx;
					display: block;
					margin: 0 auto;
				}

				.film {
					position: absolute;
					width: 100%;
					height: 100%;
				}

			}

		}
	}
</style>
